<template>
	<div class="patient">
		<el-tabs v-model="activeName" @tab-click="handleClick">
			<el-tab-pane label="ICD-10编码配置" name="1">
			</el-tab-pane>
			<el-tab-pane label="ICD-9编码配置" name="2"></el-tab-pane>
		</el-tabs>
		<el-row>
			<el-col>
				<el-button class="add-btn" type="primary" icon="el-icon-plus" @click="newVersion">创建新版本</el-button>
			</el-col>
		</el-row>
		<el-row class="patient-table">
			<el-table
				:data="list"
				stripe
				v-loading="tableLoading"
				header-row-class-name="table-header"
				empty-text=""
				:header-cell-style="tableHeaderObj"
				:cell-style="cellStyle"
				:max-height="tableHeight"
				style="width: 100%;max-width:1028px; border: 1px solid #ebeef5">
				<el-table-column
					prop="version_id"
					label="版本号"
					align="center">
				</el-table-column>
				<el-table-column
					label="更新时间"
					min-width="180"
					align="center">
					<template slot-scope="scope">
						<span>{{scope.row.create_time | parseTime('{y}-{m}-{d}')}}</span>
					</template>
				</el-table-column>
				<el-table-column
					prop="create_uid_text"
					label="操作人"
					min-width="100"
					align="center">
				</el-table-column>
				<el-table-column
					label="版本说明"
					min-width="150"
					align="center">
					<template slot-scope="scope">
						<span class="span-btn" @click="viewVersion(scope.row.id)">查看</span>
					</template>
				</el-table-column>
			</el-table>
			<div class="list-page">
				<el-pagination v-if="totalCount>10"
											 background
											 layout="total, slot, prev, pager, next"
											 :total="totalCount"
											 @current-change="handleCurrentChange">
					<span class="el-pagination__total page-span">记录</span>
				</el-pagination>
				<el-pagination v-else
											 background
											 layout="total, slot"
											 :total="totalCount">
					<span class="el-pagination__total page-span">记录</span>
				</el-pagination>
			</div>
		</el-row>
		<!--查看版本-->
		<el-dialog
			title=""
			class="task-dialog"
			:visible.sync="dialogViewVersion"
			width="500px"
			:show-close="false"
			:modal="true"
			top="25vh">
			<div class="task-dialog-header">
				<div class="header-left">
					{{viewVersionForm.version_id}}
				</div>
				<div class="header-right">
					<el-button size="small" @click="dialogViewVersion = false" style="margin-right:10px;">关闭</el-button>
					<a :href="downloadData" download><el-button size="small" type="primary">下载数据</el-button></a>
				</div>
				<div class="clearfix"></div>
			</div>
			<el-form class="card-form" label-width="100px">
				<div class="task-dialog-title"></div>
				<div class="version-content">
					<p>版本说明：</p>
					<span v-html="viewVersionForm.version_explain"></span>
				</div>
				<div class="version-footer">
					<span>操作人：{{viewVersionForm.create_uid_text}}</span>
					<span style="margin-left:36px;">更新时间：{{viewVersionForm.create_time | parseTime('{y}-{m}-{d}')}}</span>
				</div>
				<div class="clearfix"></div>
			</el-form>
		</el-dialog>
		<!--创建新版本-->
		<el-dialog
			title=""
			class="task-dialog"
			:visible.sync="dialogAddVersion"
			width="450px"
			:show-close="false"
			:modal="true"
			@close="resetTmp()"
			top="15vh">
			<div class="task-dialog-header">
				<div class="header-left">
					创建新版本
				</div>
				<div class="header-right">
					<el-button size="small" @click="dialogAddVersion = false">取消</el-button>
					<el-button size="small" type="primary" @click="createVersion" v-show="!createLoading">创建</el-button>
					<el-button size="small" type="primary" @click="createVersion" icon="el-icon-loading" v-show="createLoading" disabled>创建</el-button>
				</div>
				<div class="clearfix"></div>
			</div>
			<el-form :model="addVersionForm" ref="addVersionForm" :rules="addRule" class="card-form" label-width="90px">
				<div class="task-dialog-title"></div>
				<div class="history-timeline clearfix">
					<div class="time-line">
						<div class="time-line-left"></div>
						<div class="time-line-circle">1</div>
						<div class="time-line-right">
							<div class="line-right-text">
								<span class="span-t" v-show="activeName==='1'">下载ICD-10数据模板，填写信息</span>
								<span class="span-t" v-show="activeName==='2'">下载ICD-9数据模板，填写信息</span>
								<span class="span-content"><a :href="downloadTemp" style="color:#409eff;">下载模板</a></span>
							</div>
						</div>
					</div>
					<div class="time-line">
						<div class="time-line-left"></div>
						<div class="time-line-circle">2</div>
						<div class="time-line-right">
							<div class="line-right-text">
								<span class="span-t">上传填写好的信息表格</span>
								<el-upload
									class="upload-demo"
									ref="uploadExcel"
									action=""
									multiple
									:on-change="handleChange"
									:before-remove="handleRemove"
									:on-exceed="handleExceed"
									:limit="1"
									:file-list="fileList"
									:auto-upload="false">
									<span class="span-content">选择文件</span>
								</el-upload>
							</div>
						</div>
					</div>
				</div>
				<el-form-item label="版本号：" class="card-item-1" prop="version_id" v-show="showFormItem">
					<el-input placeholder="请输入版本号" v-model="addVersionForm.version_id"></el-input>
				</el-form-item>
				<el-form-item label="版本说明：" class="card-item-1" prop="version_explain" v-show="showFormItem">
					<el-input v-model="addVersionForm.version_explain" type="textarea" rows="4" placeholder="请输入内容，限字500" maxlength="500"></el-input>
				</el-form-item>
				<div class="clearfix"></div>
			</el-form>
		</el-dialog>
	</div>
</template>
<style scoped>
	.patient{
		position:relative;
		height:100%;
	}
	.patient >>> .el-tabs__item{
		font-weight:700;
	}
	.patient >>> .el-tabs__item.is-active{
		color:#4d4d4d;
	}
	.search-input{
		width:320px;
	}
	.search-btn{
		margin-left:15px;
		margin-right:15px;
	}
	.add-btn{
		margin-top:15px;
		width:110px;
		padding:12px 0;
	}
	.high-search{
		font-size:14px;
		color:#409eff;
		cursor: pointer;
	}
	.high-search i{
		margin-left:5px;
	}
	.patient-table{
		height:calc(100vh - 280px);
		margin-top:30px;
	}
	.list-page{
		text-align: center;
		position:absolute;
		bottom:0px;
		left:50%;
		transform:translateX(-50%);
		margin-top:20px;
	}
	.page-span{
		margin-left:-14px;
		font-size:13px;
		margin-right:20px;
	}
	.color-red{
		color: #f56c6c!important;
	}
	.color-b{
		color:#409EFF!important;
		cursor: pointer;
	}
	.search-row{
		overflow-x: auto;
		margin-bottom:10px;
	}
	.search-row >>> .el-scrollbar__wrap{
		overflow-x: scroll;
	}
	.search-row >>> .el-select{
		margin-right:10px;
	}
	.search-row >>> .el-input__inner{
		width:0;
		padding:0;
		border:0;
		height:45px;
		line-height:45px;
	}
	.search-row >>> .el-input__prefix, .search-row >>> .el-input__suffix{
		position:relative;
	}
	.search-row >>> .el-input__prefix{
		margin-right:8px;
		cursor: pointer;
		color:#909399;
	}
	.search-row >>> .el-select .el-input .el-select__caret{
		color:#909399;
	}
	.select-age >>> .el-popper{
		display: none;
	}
	.age-popper >>> .el-input{
		width:100px;
	}
	.age-popper >>> .el-input__inner{
		text-align: center;
	}
	.el-popper[x-placement^=bottom]{
		margin-top:-6px;
	}
	.el-form--inline .el-form-item{
		margin-right:0;
		margin-top:5px;
		margin-bottom:10px;
	}
	.card-picker >>> .el-input__icon{
		display: none;
	}
	.card-picker >>> .el-range-separator{
		display: none;
	}
	.search-date{
		color:#909399;
		font-size:14px;
		cursor: pointer;
		margin-right:10px;
	}
	.search-date i{
		margin-left:4px;
		color:#909399;
	}
	.search-row >>> .el-date-editor{
		margin-right:10px;
	}
	.cascader-select >>> .el-cascader__label{
		padding:0;
	}
	.cascader-select >>> .el-input__suffix{
		display: none;
	}
	.block-row{
		height:55px;
	}
	.task-dialog >>> .el-dialog {
		/*height: 580px;*/
		margin-bottom: 0px;
		overflow: auto;
	}
	.task-dialog >>> .el-dialog__header{
		padding:10px 20px 10px;
	}
	.task-dialog-header {
		padding: 0 30px;
		margin-bottom: 10px;
	}
	.task-dialog-header .header-left {
		float: left;
		font-weight: bold;
		font-size: 16px;
		line-height: 44px;
	}
	.task-dialog-header .header-right {
		float: right;
		clear: right;
	}
	.task-dialog-header .header-right >>> .el-button{
		width:80px;
		height:32px;
		padding:8px 0;
		margin-top:6px;
	}
	.task-dialog-title {
		height:4px;
		background-color: #f5f7fa;
		padding: 0 30px;
		margin-bottom: 20px;
	}
	.task-dialog >>> .el-dialog__body{
		padding:10px 0 20px;
	}
	.card-form .card-item-1{
		padding:0 30px;
		box-sizing: border-box;
	}
	.card-form .version-content{
		padding:0 30px 20px;
		box-sizing: border-box;
	}
	.card-form .version-content span{
		display: block;
		line-height:24px;
		margin-bottom:5px;
	}
	.card-form .version-footer{
		margin:0 30px 10px;
		border-top:1px solid #e9ecf4;
		color:#909399;
		padding-top:25px;
	}
	.card-form .rights-type-text{
		display: inline-block;
		margin-left:10px;
	}
	.card-form .card-item-1 >>> .el-input{
		width:100%;
	}
	.card-form >>> .el-form-item__label{
		text-align: left;
	}
	.l-space-28 >>> .el-form-item__label{
		letter-spacing: 28px;
	}
	.l-space-28-r >>> .el-form-item__label{
		text-indent: 10px;
	}
	.l-space-7 >>> .el-form-item__label{
		letter-spacing: 7px;
	}
	.card-form .key-info-left{
		width:50%;
		float:left;
	}
	.card-form .key-info-right{
		width:50%;
		float:right;
	}
	.card-form .key-info-right .picture-text{
		display: inline-block;
		width:100px;
		position:relative;
		top:-62px;
		line-height:22px;
		margin-left:27px;
	}
	.card-form .card-item-2{
		padding:0 0 0 30px;
		box-sizing: border-box;
	}
	.card-form .card-item-2 >>> .el-input{
		width:170px;
	}
	.card-form .card-item-3 >>> .el-input{
		width:572px;
	}
	.card-form .card-item-4 >>> .el-input{
		width:130px;
		margin-right:13px;
	}
	.card-form .card-item-5 >>> .el-input{
		width:210px;
	}
	.card-form .card-item-4 >>> .el-select:last-of-type .el-input{
		margin-right:0;
	}
	.card-form .birthday-text{
		display: inline-block;
		width: 30px;
		text-align: right;
	}
	.card-form >>> .el-form-item__label{
		padding:0;
	}
	.card-form >>> .el-form-item.is-required .el-form-item__label:before{
		letter-spacing: 0;
	}
	.card-form >>> .el-checkbox{
		width:110px;
	}
	.card-form >>> .el-checkbox+.el-checkbox{
		margin-left:0;
	}
	.patient >>> .el-table th.gutter{
		background-color:#f5f7fa;
	}
	.span-btn{
		color:#409EFF;
		cursor:pointer;
		margin-right:18px;
	}
	.span-btn:last-of-type{
		margin-right:0;
	}
	.authority-text{
		overflow:hidden;
		text-overflow:ellipsis;
		white-space: nowrap;
		width:165px;
		display: inline-block;
	}
	.card-form >>> .el-checkbox__input.is-disabled.is-checked .el-checkbox__inner::after{
		border-color: #fff;
	}
	.card-form >>> .el-checkbox__input.is-disabled.is-checked .el-checkbox__inner{
		background-color:#a5c7ff;
		border-color:#a5c7ff;
	}
	.card-form >>> .el-checkbox__input.is-disabled+span.el-checkbox__label{
		color:#a5c7ff;
	}
	.reset-dialog >>> .el-dialog{
		border-radius:5px;
	}
	.reset-dialog >>> .el-button{
		width:80px;
		height:32px;
		padding:8px 0;
	}
	.reset-dialog >>> .el-dialog__body{
		padding-top:10px;
	}
	.reset-dialog >>> .el-form-item__label{
		text-align: left;
	}
	.reset-dialog >>> .el-form-item{
		margin-bottom:0;
	}
	.history-timeline{
		margin-top:28px;
	}
	.history-timeline .time-line{
		display: flex;
		position:relative;
		overflow: hidden;
		vertical-align: center;
	}
	.time-line .time-line-left{
		width:20px;
		color:#909399;
		position:relative;
		top:-2px;
		text-align: right;
	}
	.time-line .time-line-circle{
		width:24px;
		height:24px;
		border-radius:50%;
		background-color:#b9bec2;
		position:relative;
		top:0px;
		margin:0 14px;
		text-align: center;
		line-height:24px;
		color:#fff;
		font-weight:700;
		z-index: 2;
	}
	.time-line .time-line-right{
		width:77%;
		padding-bottom:30px;
	}
	.time-line-right .line-right-text span{
		display: block;
		line-height: 24px;
	}
	.line-right-text .span-t{
		color:#4d4d4d;
		font-weight:700;
	}
	.line-right-text .span-content{
		color:#409eff;
		margin-top:8px;
		cursor: pointer;
		text-decoration: underline;
	}
	.time-line-circle:after{
		content: '';
		width:2px;
		height:100vh;
		background-color: #b9bec2;
		margin-left:-1px;
		position:absolute;
		left:50%;
		z-index:-1;
	}
	.time-line:last-of-type .time-line-circle:after{
		height:0;
	}
</style>
<script>
	import { versionList, viewVersion, addVersion, downloadVersion } from '@/api/operation'
	import { getToken } from '@/utils/auth'
	export default{
		data() {
			return {
				list: [],
				activeName: '1',
				tableLoading: true,
				tableHeaderObj: {
					'background-color': '#f5f7fa',
					'color': '#606266',
					'height': '68px'
				},
				cellStyle: {
					'height': '68px'
				},
				totalCount: 0,
				tableHeight: 0,
				page: {
					'per-page': 10,
					page: 1
				},
				dialogViewVersion: false,
				dialogAddVersion: false,
				fileList: [],
				viewVersionForm: {},
				addVersionForm: {
					'version_id': '',
					'version_explain': ''
				},
				addRule: {
					version_id: [{ required: true, message: '请输入版本号', trigger: 'blur' }],
					version_explain: [{ required: true, message: '请输入版本说明', trigger: 'blur' }]
				},
				downloadTemp: '',
				downloadData: '',
				showFormItem: false,
				createLoading: false
			}
		},
		created() {
		  this.getList()
		},
		mounted() {
			const that = this
			that.$nextTick(() => {
				that.tableHeight = document.documentElement.clientHeight - 335
			})
			window.onresize = () => {
				that.$nextTick(() => {
					that.tableHeight = `${document.documentElement.clientHeight}` - 335
				})
			}
		},
		methods: {
			handleCurrentChange(val) {
				this.page.page = val
				this.getList()
			},
			// 切换tab标签页
			handleClick(tab) {
				this.page.page = 1
				this.getList()
			},
			// 版本列表
			getList() {
			  this.tableLoading = true
				versionList(Object.assign({}, {type: this.activeName}, this.page)).then(response => {
					this.tableLoading = false
					this.list = response.data.data
					this.totalCount = response.data._meta.totalCount
				})
			},
			// 查看版本信息
			viewVersion(id) {
				// this.downloadData = process.env.BASE_API + '/manage/operation/download-icd-version?token=' + getToken() + '&id=' + id
				downloadVersion(Object.assign({}, {id: id})).then(response => {
					this.downloadData = response.data.fileurl
				})
				viewVersion(Object.assign({}, {id: id})).then(response => {
					this.dialogViewVersion = true
					this.viewVersionForm = response.data.data[0]
					this.viewVersionForm.version_explain = this.viewVersionForm.version_explain.split('\n').join('<br/>')
				})
			},
			resetTmp() {
				this.addVersionForm.version_id = ''
				this.addVersionForm.version_explain = ''
				this.showFormItem = false
				this.fileList = []
				this.$nextTick(() => {
					this.$refs['addVersionForm'].clearValidate()
				})
			},
			// 创建新模板弹窗
			newVersion() {
				this.dialogAddVersion = true
				this.createLoading = false
				this.downloadTemp = process.env.BASE_API + '/manage/operation/download-template?token=' + getToken() + '&type=' + this.activeName
			},
			handleChange(file, fileList) {
			 	if (fileList.length > 0) {
			 	  this.showFormItem = true
				} else {
					this.showFormItem = false
				}
			},
			handleRemove(file, fileList) {
				this.showFormItem = false
				/* this.addVersionForm.version_id = ''
				this.addVersionForm.version_explain = '' */
			},
			handleExceed(file, fileList) {
				this.$message.warning('当前限制选择1个文件')
			},
			// 创建版本
			createVersion() {
				if (this.showFormItem) {
					this.$refs['addVersionForm'].validate((valid) => {
						if (valid) {
							this.createLoading = true
							var fd = new FormData()
							/* for (const k in this.$refs.uploadExcel.$refs['upload-inner'].fileList) {
								fd.append('file', this.$refs.uploadExcel.$refs['upload-inner'].fileList[k].raw)
							} */
							fd.append('file', this.$refs.uploadExcel.$refs['upload-inner'].fileList[0].raw)
							fd.append('token', getToken()) // 用户token
							fd.append('type', this.activeName)
							fd.append('version_id', this.addVersionForm.version_id)
							fd.append('version_explain', this.addVersionForm.version_explain)
							addVersion(fd).then(response => {
								this.createLoading = false
								this.dialogAddVersion = false
								this.showFormItem = false
								this.getList()
								this.$message.success('新版本创建成功')
							})
						} else {
							return false
						}
					})
				} else {
					this.$message.error('请先下载模板并选择上传文件')
				}
			}
		}
	}
</script>
